<template>
  <div v-if="isOne && type === 'image'" class="attr-item-box">
    <div class="bg-item ivu-mb-8">
      <Dropdown style="width: 270px" @on-click="addClipPath">
        <Button type="text" long>{{ $t('createClip') }}</Button>
        <template #list>
          <DropdownMenu>
            <DropdownItem v-for="item in options" :key="item.value" :name="item.value">
              {{ item.label }}
            </DropdownItem>
          </DropdownMenu>
        </template>
      </Dropdown>
    </div>
    <div class="bg-item">
      <Button @click="removeClip" type="text" long>{{ $t('removeClip') }}</Button>
    </div>
  </div>
</template>

<script setup name="ReplaceImg">
import useSelect from '@/hooks/select';
import { useI18n } from 'vue-i18n';

const update = getCurrentInstance();
// const canvasEditor = inject('canvasEditor');
const { canvasEditor, isOne } = useSelect();
const { t } = useI18n();
const type = ref('');
const options = [
  {
    label: t('polygonClip'),
    value: 'polygon',
  },
  {
    label: t('rectClip'),
    value: 'rect',
  },
  {
    label: t('circleClip'),
    value: 'circle',
  },
  {
    label: t('triangleClip'),
    value: 'triangle',
  },
  {
    label: t('polygonClipInverted'),
    value: 'polygon-inverted',
  },
  {
    label: t('rectClipInverted'),
    value: 'rect-inverted',
  },
  {
    label: t('circleClipInverted'),
    value: 'circle-inverted',
  },
  {
    label: t('triangleClipInverted'),
    value: 'triangle-inverted',
  },
];
const addClipPath = async (name) => {
  canvasEditor.addClipPathToImage(name);
};
const removeClip = () => {
  canvasEditor.removeClip();
};
const init = () => {
  const activeObject = canvasEditor.canvas.getActiveObjects()[0];
  if (activeObject) {
    type.value = activeObject.type;
    update?.proxy?.$forceUpdate();
  }
};

onMounted(() => {
  canvasEditor.on('selectOne', init);
});

onBeforeUnmount(() => {
  canvasEditor.off('selectOne', init);
});
</script>
<style lang="less" scoped>
.attr-item-box {
  margin-top: 8px;
}
</style>
